<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>ScrollablePane Tests</title>
<script type="text/javascript" src="../../../../../dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
	require([
			"dojo/ready",
			"dojo/sniff",
			"dojo/dom",
			"dojo/dom-class",
			"dojo/dom-geometry",
			"dojo/_base/window",
			"doh/runner",
		 	"dojox/mobile",				// This is a mobile app.
			"dojox/mobile/parser",		// This mobile app uses declarative programming with fast mobile parser
			"dojox/mobile/ScrollablePane"
	], function(ready, has, dom, domClass, domGeom, win, runner){
		ready(function(){
			var view = dom.byId("view");
			var containerDiv = dom.byId("containerDiv");
			var scrollablePane = dom.byId("scrollablePane");
			runner.register("dojox.mobile.test.doh.scrollablepane.ScrollablePaneTests", [
				{
					name: "Verify that ticket #15761 is fixed",
					timeout: 4000,
					runTest: function(){
						var bodyTopPadding = domClass.contains(win.doc.documentElement, "windows_theme") ? 8 : 0;
						var viewPosition = domGeom.position(view, false);
						console.log(viewPosition);
						runner.assertEqual(0 + bodyTopPadding, viewPosition.y, "view position y is not the expected one");
						runner.assertEqual(180, viewPosition.h, "view position h is not the expected one");
						var containerDivPosition = domGeom.position(containerDiv, false);
						runner.assertEqual(20 + bodyTopPadding, containerDivPosition.y, "container DIV position y is not the expected one");
						runner.assertEqual(140, containerDivPosition.h, "container DIV position h is not the expected one");
						console.log(containerDivPosition);
						var scrollablePanePosition = domGeom.position(scrollablePane, false);
						console.log(scrollablePanePosition);
						runner.assertEqual(40 + bodyTopPadding, scrollablePanePosition.y, "scrollable pane position y is not the expected one");
						runner.assertEqual(100, scrollablePanePosition.h, "scrollable pane position h is not the expected one");
					}
				}
			]);
			runner.run();
		});
	});
</script>
<style type="text/css">
</style>
</head>
<body style="visibility:hidden;">
	<div id="view" data-dojo-type="dojox.mobile.View" style="border-top: 20px solid blue; border-bottom: 20px solid blue;">
		<div id="containerDiv" style="border-top: 20px solid green; border-bottom: 20px solid green; height: 100px; position: relative;">
			<div id="scrollablePane" data-dojo-type="dojox.mobile.ScrollablePane" height="inherit" style="border-top: 20px solid white; border-bottom: 20px solid white; background-color: red; color: white;">
				This is a first scrollable pane.
			</div>
		</div>
	</div>
</body>
</html>
